<script setup lang="ts">
import type { IArticles } from '@/types/articles';


// 卡片内容,外面的list组件传入
const props = defineProps<{
    item: IArticles
}>()
</script>

<template>
    <div class="w-full h-26  border-b-2 border-b-gray-300 flex cursor-pointer">
        <!-- 左侧放文章封面图片 -->
        <div class=" w-50 h-full bg-sky-500">
            <el-image class=" w-full h-full" :max-scale="5" :min-scale="0.2" :preview-src-list="[props.item.cover_img]"
                :src="props.item.cover_img" />
        </div>
        <!-- 右侧内容 -->
        <div class=" h-full w-full  flex flex-col justify-between hover:bg-gray-200">
            <!-- 右侧第一行标题 -->
            <div class=" text-center text-xl font-bold">{{ props.item.title }}</div>
            <!-- 第二行内容预览 -->
            <div>
                <el-text line-clamp="2" class=" font-medium text-black" size="large">
                    {{ props.item.content }}
                </el-text>
            </div>
            <!-- 第三行点赞作者等信息 -->
            <div>文章点赞作者等信息</div>
        </div>


    </div>
</template>

<style scoped>
.el-text {
    color: black
}
</style>
